<script setup>
import { ref } from "vue";
const option = ref({
  title: {
    text: "各朝代自然科学著作分布",
    left: "center",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  // 图表布局设置
  grid: {
    left: "15%", // 图表区域左边距为容器宽度的10%
    // right: '10%',   // 若启用，右边距设为10%（当前注释状态不生效）
    // containLabel: true // 确保坐标轴标签在grid区域内（当前关闭）
    bottom: 62,
  },

  // 提示框配置
  tooltip: {
    trigger: "axis", // 触发方式为坐标轴触发
    axisPointer: {
      // 坐标轴指示器配置
      type: "none", // 不显示指示线
    },
    formatter: function (params) {
      // 自定义提示内容格式
      return `${params[0].name}<br/>典籍数量：${params[0].value}部`;
    },
  },

  // X轴配置
  xAxis: {
    data: [
      "先秦",
      "秦朝",
      "汉朝",
      "魏晋南北朝",
      "隋朝",
      "唐朝",
      "宋朝",
      "元朝",
      "明朝",
      "清朝",
    ],
    axisTick: { show: false }, // 隐藏刻度线
    axisLine: { show: false }, // 隐藏轴线
    axisLabel: {
      color: "#666", // 标签文字颜色
      interval: 0,
      rotate: 30,
      fontSize: 12,
    },
  },

  // Y轴配置
  yAxis: {
    position: "left", // 坐标轴位置在左侧
    scale: true, // 让x轴数据从最低开始不是0
    // splitNumber: 5, // 固定分割段数
    // minInterval: 10,  // 防止自动缩放过度
    // offset: 40,         // 关键参数：向右偏移40像素（正值向右，负值向左）
    axisLine: {
      // 轴线样式配置
      // show: true,    // 默认不显示轴线（当前注释关闭显示）
      lineStyle: {
        color: "#666", // 轴线颜色
        width: 2, // 轴线宽度
      },
    },

    type: "value",
    // 核心动态范围配置
    // min: 'dataMin',   // 数据最小值（本例中为1）
    // max: 'dataMax',   // 数据最大值（本例中为125）

    // 轴标签样式
    axisLabel: {
      margin: 25, // 标签与轴线的间距25像素
      align: "right", // 标签右对齐
      color: "#666",
      fontSize: 12,
      formatter: (value) => `${value}`, // 添加单位
    },
    // 以下为被注释的原始配置：
    // splitLine: { show: false },  // 隐藏网格线
    // axisTick: { show: false },   // 隐藏刻度线
    // axisLine: { show: false },   // 隐藏轴线
    // axisLabel: { show: false }   // 隐藏标签
  },

  // 系列数据配置
  series: [
    {
      name: "科学著作", // 系列名称
      type: "pictorialBar", // 使用象形柱图
      barCategoryGap: "-130%", // 柱间距离（负值产生重叠效果）

      // 自定义矢量路径（生成山形图案）
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",

      // 数据项样式
      itemStyle: {
        opacity: 0.5, // 默认透明度
        color: (params) => {
          // 动态颜色函数
          const colors = [
            // 颜色数组
            "#36724C",
            "#96a48d",
            "#3EA892",
            "#c79780",
            "#813c3f",
            "#4d7b9f",
            "#3f503b",
            "#DDB580",
            "#C26051",
            "#96CB9C",
            "#52CAC4",
            "#617750",
            "#225165",
          ];
          return colors[params.dataIndex]; // 按数据索引取色
        },
      },

      // 高亮状态样式
      emphasis: {
        itemStyle: {
          opacity: 1, // 悬停时变为不透明
        },
      },

      data: [
        38, // 先秦（《考工记》等）
        12, // 秦朝
        176, // 汉朝（《九章算术》《汜胜之书》等）
        245, // 魏晋南北朝（《齐民要术》前身等）
        58, // 隋朝
        327, // 唐朝（《千金方》《茶经》等）
        489, // 宋朝（《梦溪笔谈》《营造法式》等）
        267, // 元朝（《农书》《饮膳正要》等）
        412, // 明朝（《天工开物》《本草纲目》等）
        385, // 清朝（《畴人传》《植物名实图考》等）
      ], // 数据值
      z: 10, // 层叠等级（控制显示优先级）
    },
  ],
});
</script>

<template>
  <!-- 科学著作页面的象形柱图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped></style>
